<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试 globalCompositeOperationAPI</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .wrap {
        background: skyblue;
      }

      canvas {
        background: red;
        /* background-image: url('../static/img/1.jpg'); */
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <canvas id="canvas" height="400" width="600"></canvas>
    </div>
  </body>

  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    const width = 600
    const height = 400

    const image = new Image()
    image.src = '/views/static/img/1.jpg'
    image.onload = function () {
      // 画了一张图片但是只要使用 globalCompositeOperation 以后就被切掉了
      // ctx.globalCompositeOperation = 'source-over'
      // ctx.drawImage(image, 0, 0, width, height)

      // ctx.save()

      // return

      // 画一个小方块
      ctx.fillStyle = 'yellow'
      // ctx.fillRect(100, 100, 100, 100)

      // 试试圆形
      ctx.arc(100, 100, 50, 0, 2 * Math.PI)
      ctx.fill()

      ctx.globalCompositeOperation = 'source-out'

      // 画两个方框，中间扣个洞，用来透下去看到底层的裁剪对象
      // ctx.globalCompositeOperation = 'source-over'
      ctx.fillStyle = 'rgba(1,1,1,.5)'
      ctx.fillRect(0, 0, width, height)

      // ctx.globalCompositeOperation = 'xor'
      // 修改  globalCompositeOperation 为默认值   继续往下画
      ctx.globalCompositeOperation = 'source-over'

      ctx.strokeStyle = '#000'
      ctx.lineWidth = 10
      ctx.moveTo(0, 0)
      ctx.lineTo(width, height)
      ctx.stroke()
    }
  </script>
</html>
